<template>
	<view class="base-page">
		<u-notify ref="uNotify"></u-notify> <!-- 通知横幅 -->
		<u-modal :show="showsuccess" title="注册成功" :content="message" @confirm="showsuccess = false"></u-modal>
		<!-- 注册成功模态框 -->
		<u-modal :show="showfail" title="注册失败" :content="message" @confirm="showfail = false"></u-modal>
		<!-- 提交失败模态框 -->
		<view class="register-title">
			<text class="register-title-type">新用户注册</text>
			<text class="register-title-text">已有账号？</text>
			<text class="register-title-navi" @click="jumpLogin()">立即登录</text>
		</view>
		<view class="register-list">
			<u-form :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item prop="phone">
					<u-input placeholder=请输入手机号 border="bottom" v-model="userInfo.phone" type="number" maxlength="11"
						clearable>
						<u--text text="+86" slot="prefix" margin="0 3rpx 0 0" type="tips"></u--text>
					</u-input>
				</u-form-item>
				<u-form-item prop="password">
					<u-input placeholder=请输入密码 border="bottom" v-model="userInfo.password" type="password"
						maxlength="30" clearable></u-input>
				</u-form-item>
				<u-form-item prop="confirmpassword">
					<u-input placeholder=请再次确认密码 border="bottom" v-model="userInfo.confirmpassword" type="password"
						maxlength="30" clearable></u-input>
				</u-form-item>
			</u-form>
		</view>
		<u-gap height="100rpx" bgColor="#ffffff"></u-gap>
		<view class="register-btn">
			<u-button text="注册" type="primary" size="normal" @click="clickRegister()" :loading="showloading"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户信息
				userInfo: {
					phone: "",
					password: "",
					confirmpassword: "", //二次确认密码
					wxid: "", // 微信用户ID
				},
				//模态框控制
				showsuccess: false,
				showfail: false,
				//加载动画
				showloading: false,
				//横幅信息
				message: "",

				//表单验证规则
				rules: {
					'phone': [{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change'],
					}, {
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							return uni.$u.test.mobile(value);
						},
						message: '手机号码格式错误',
						trigger: ['blur'],
					}],
					'password': [{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},{
						min: 6,
						message: '密码不少于6个字符',
						trigger: ['blur'],
					}],
					'confirmpassword': [{
						type: 'string',
						required: true,
						message: '请再次填写密码',
						trigger: ['blur', 'change']
					},{
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							return this.userInfo.password == this.userInfo.confirmpassword;
						},
						message: '两次输入的密码不一致',
						trigger: ['blur'],
					}]
				},
			};
		},
		methods: {
			//跳转到登陆页面
			jumpLogin() {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			//点击注册按钮
			clickRegister() {
				this.showloading = true
				//表单校验
				this.$refs.uForm.validate().then(res => {
					//获取code
					wx.login({
						success: (res) => {
							this.responseResult = res;
							//根据code获取openid
							uni.request({
								url: getApp().globalData.baseUrl+'/landlord/noLogin/getOpenid',
								method: 'GET',
								data: {
									code: res.code
								},
								success: (res) => {
									this.responseResult = res.data;
									if (this.responseResult.success == true) {
										this.userInfo.wxid = this.responseResult.data.openid
									} else {
										this.$refs.uNotify.warning(this.responseResult.errorMsg)
									}
									//发送注册请求
									uni.request({
										url: getApp().globalData.baseUrl+'/landlord/noLogin/register',
										method: 'GET',
										data: {
											phone: this.userInfo.phone,
											password: this.userInfo.password,
											wxId: this.userInfo.wxid,
										},
										success: (res) => {
											this.showloading = false
											this.responseResult = res.data;
											if (this.responseResult.success == true) {
												uni.reLaunch({
													url: "/pages/login/login?sign=1&msg=" +
														this.responseResult.data
												})
											} else {
												uni.reLaunch({
													url: "/pages/login/login?sign=2&msg=" +
														this.responseResult.errorMsg
												})
											}
										},
										fail: (err) => {
											this.$refs.uNotify.error("请求错误: 注册失败")
										},
										complete: () => {
											this.showloading = false
										}
									});
								},
								fail: (err) => {
									this.$refs.uNotify.error("请求错误: 获取OpenID失败")
								},
								complete: () => {
									this.showloading = false
								}
							});
						},
						fail: (err) => {
							this.$refs.uNotify.error("请求错误: 获取Code失败")
						},
						complete: () => {
							this.showloading = false
						}
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss">
	.base-page {
		background-color: #ffffff;
		height: 100%;
		box-sizing: border-box;
	}

	.register-title {
		display: flex;
		height: 150rpx;
		margin-left: 50rpx;
		/* 左边距 */
		margin-right: 50rpx;
		/* 右边距 */
		
		.register-title-type {
			font-size: 60rpx;
			font-weight: bold;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 150rpx;
			width: 450rpx;

		}

		.register-title-text {
			font-size: 20rpx;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			height: 150rpx;
			width: 100rpx;
		}

		.register-title-navi {
			font-size: 20rpx;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			height: 150rpx;
			width: 100rpx;
			color: blue;
		}
	}

	.register-list {
		background-color: #ffffff;
		margin-left: 50rpx;
		/* 左边距 */
		margin-right: 50rpx;
		/* 右边距 */
	}

	.register-btn {
		width: 650rpx;
		margin-left: 50rpx;
	}
</style>